<template>
    <!-- 子项卡牌 -->
    <div>
        <el-card
            class="table_sub_card margin_top10"
            v-for="(cardItem, cardIndex) in tableCardList"
            :key="cardIndex"
        >
            <el-collapse v-model="isCardCollapseIndex" accordion>
                <el-collapse-item :name="cardIndex">
                    <template slot="title">
                        <div
                            class="card_item flex_box overflow_hidden border_box"
                        >
                            <div
                                class="card_item_title table_border"
                                :style="{
                                    width: `${
                                        headTableInfo.indexWith +
                                        headTableInfo.titleWidthList[0]
                                    }px`,
                                }"
                            >
                                <div class="space_txt" v-show="isStartRender">
                                    <i
                                        :class="[
                                            'table_sub_card_arrow_icon',
                                            'el-collapse-item__arrow',
                                            'el-icon-arrow-right',
                                            isCardCollapseIndex === cardIndex &&
                                                'is-active',
                                        ]"
                                    ></i>
                                    <span>{{ cardItem.name }}</span>
                                    <span class="desc_txt_color">总数 12</span>
                                </div>
                            </div>
                            <div
                                class="table_item_control flex_box border_box overflow_hidden"
                            >
                                <div
                                    v-for="(
                                        cardItem, cardHeadIndex
                                    ) in headTableInfo.titleWidthList.slice(1)"
                                    :key="cardHeadIndex"
                                    class="card_head_item table_item_menu border_box desc_txt_color"
                                    :ref="`tableItemMenu_${cardIndex}_${cardHeadIndex}`"
                                    :style="{
                                        width: `${cardItem}px`,
                                    }"
                                    @click.prevent.stop="
                                        $emit(
                                            'openMenuModel',
                                            $refs[
                                                `tableItemMenu_${cardIndex}_${cardHeadIndex}`
                                            ][0],
                                            { active: 1 }
                                        )
                                    "
                                >
                                    <div
                                        v-if="
                                            tableHeadItemList[cardHeadIndex] &&
                                            tableHeadItemList[cardHeadIndex]
                                                .isFixed
                                        "
                                    >
                                        <div class="arrow_icon_box">
                                            <span>{{
                                                tableHeadItemList[
                                                    cardHeadIndex
                                                ] &&
                                                tableHeadItemList[cardHeadIndex]
                                                    .title
                                            }}</span>
                                            <i class="el-icon-arrow-down"></i>
                                        </div>
                                    </div>
                                    <div v-else class="table_item_display">
                                        <div class="arrow_icon_box">
                                            <span>{{
                                                tableHeadItemList[
                                                    cardHeadIndex
                                                ] &&
                                                tableHeadItemList[cardHeadIndex]
                                                    .title
                                            }}</span>
                                            <i class="el-icon-arrow-down"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="card_item_content">
                        <el-card>
                            <el-collapse
                                v-model="isShowCardSubCollapse"
                                accordion
                            >
                                <el-collapse-item
                                    :name="`subCollapse_${cardIndex}`"
                                >
                                    <template slot="title">
                                        <div
                                            class="card_sub_container width_100"
                                        >
                                            <div
                                                v-show="isStartRender"
                                                class="card_content_item flex_box border_bottom"
                                            >
                                                <div
                                                    class="card_content_item_title table_sub_head table_border"
                                                    :style="{
                                                        width: `${
                                                            cardTableWidth -
                                                            headTableInfo.titleAllWidth +
                                                            headTableInfo
                                                                .titleWidthList[0]
                                                        }px`,
                                                    }"
                                                >
                                                    <div
                                                        class="space_txt border_left border_box"
                                                    >
                                                        <i
                                                            :class="[
                                                                'table_sub_card_arrow_icon',
                                                                'el-collapse-item__arrow',
                                                                'el-icon-arrow-right',
                                                                isShowCardSubCollapse ===
                                                                    `subCollapse_${cardIndex}` &&
                                                                    'is-active',
                                                            ]"
                                                        ></i>
                                                        <span>优先级:空</span>
                                                        <span
                                                            class="desc_txt_color"
                                                            >总数 12</span
                                                        >
                                                    </div>
                                                </div>
                                                <div
                                                    class="table_card_control flex_box border_box overflow_hidden"
                                                >
                                                    <div
                                                        class="card_head_item table_sub_head table_card_item desc_txt_color"
                                                        v-for="(
                                                            cardItem,
                                                            cardSubHeadIndex
                                                        ) in headTableInfo.titleWidthList.slice(
                                                            1
                                                        )"
                                                        :key="cardSubHeadIndex"
                                                        :ref="`table_card_item_${cardIndex}_${cardSubHeadIndex}`"
                                                        :style="{
                                                            width: `${cardItem}px`,
                                                        }"
                                                        @click.prevent.stop="
                                                            $emit(
                                                                'openMenuModel',
                                                                $refs[
                                                                    `table_card_item_${cardIndex}_${cardSubHeadIndex}`
                                                                ][0],
                                                                {
                                                                    active: 1,
                                                                }
                                                            )
                                                        "
                                                    >
                                                        <div
                                                            v-if="
                                                                tableHeadItemList[
                                                                    cardSubHeadIndex
                                                                ] &&
                                                                tableHeadItemList[
                                                                    cardSubHeadIndex
                                                                ].isFixed
                                                            "
                                                        >
                                                            <div
                                                                class="arrow_icon_box"
                                                            >
                                                                <span>{{
                                                                    tableHeadItemList[
                                                                        cardSubHeadIndex
                                                                    ] &&
                                                                    tableHeadItemList[
                                                                        cardSubHeadIndex
                                                                    ].title
                                                                }}</span>
                                                                <i
                                                                    class="el-icon-arrow-down"
                                                                ></i>
                                                            </div>
                                                        </div>
                                                        <div
                                                            v-else
                                                            class="table_card_item_display"
                                                        >
                                                            <div
                                                                class="arrow_icon_box"
                                                            >
                                                                <span>{{
                                                                    tableHeadItemList[
                                                                        cardSubHeadIndex
                                                                    ] &&
                                                                    tableHeadItemList[
                                                                        cardSubHeadIndex
                                                                    ].title
                                                                }}</span>
                                                                <i
                                                                    class="el-icon-arrow-down"
                                                                ></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <!-- 表格 -->
                                    <div class="table_container">
                                        <div
                                            class="table_row flex_box"
                                            v-for="(
                                                row, rowIndex
                                            ) in cardItem.tableData"
                                            :key="rowIndex"
                                        >
                                            <div
                                                class="table_index table_col text_center border_left"
                                                :style="{
                                                    width: `${
                                                        cardTableWidth -
                                                        headTableInfo.titleAllWidth
                                                    }px`,
                                                }"
                                            >
                                                {{ rowIndex + 1 }}
                                            </div>
                                            <div
                                                class="table_col"
                                                v-for="(
                                                    tableColItem, tableColIndex
                                                ) in headTableInfo.titleWidthList"
                                                :key="tableColIndex"
                                                :style="{
                                                    width: `${tableColItem}px`,
                                                }"
                                            >
                                                <div>
                                                    <!-- {{
                                                        tableTitles[
                                                            tableColIndex
                                                        ]
                                                    }} -->
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                            class="table_row_control border_left"
                                        >
                                            <div
                                                class="row_add_button flex_box flex_center"
                                                :style="{
                                                    width: `${
                                                        cardTableWidth -
                                                        headTableInfo.titleAllWidth
                                                    }px`,
                                                }"
                                                @click="
                                                    $emit(
                                                        'addTableRow',
                                                        cardIndex,
                                                        []
                                                    )
                                                "
                                            >
                                                <i
                                                    class="el-icon-circle-plus-outline"
                                                ></i>
                                            </div>
                                        </div>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </el-card>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </el-card>
    </div>
</template>
<script>
export default {
    props: {
        tableCardList: {
            type: Array,
            default: () => [],
        },
        headTableInfo: {
            type: Object,
            default: () => ({
                headItemNodes: [],
                containerWith: 0,
                cardTableWidth: 0, // 折叠表格宽度
                indexWith: 0,
                titleWidthList: [],
                titleAllWidth: 0,
            }),
        },
        // 表头项
        tableHeadItemList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            isStartRender: false,
            isCardCollapseIndex: 1,
            isShowCardSubCollapse: "subCollapse_0",
            isShowFormModel: false,
            isShowMenuModel: false,
            cardTableWidth: 0,
            activeHeadIndex: -1,
        };
    },
    methods: {
        countCardTableWidth() {
            let cardContentItem = document.querySelectorAll(
                ".card_sub_container"
            )[this.isCardCollapseIndex];
            if (!cardContentItem) return;
            this.cardTableWidth = cardContentItem.getBoundingClientRect().width;
            this.isStartRender = true;
        },
    },
    watch: {
        headTableInfo: {
            handler: function (newValue) {
                this.countCardTableWidth();
            },
            deep: true,
            immediate: false,
        },
        // tableCardList: {
        //     handler: function (newValue) {
        //         console.log(newValue, "新知");
        //         // this.countCardTableWidth();
        //     },
        //     deep: true,
        //     immediate: false,
        // },
    },
};
</script>
<style scoped>
.table_sub_head {
    padding: 10px 20px;
    box-sizing: border-box;
}
.table_border {
    border-right: 1px solid var(--border-color);
    /* border-left: 1px solid #999; */
    box-sizing: border-box;
}
.space_txt {
    position: relative;
    padding: 0 20px 0 30px;
    display: flex;
    justify-content: space-between;
}
/* 子卡片 */
.card_item_content {
    box-sizing: border-box;
}
/* 表格 */
.card_content_item {
    width: 100%;
}
.table_card_control {
    overflow: hidden;
}
.table_row {
    border-bottom: 1px solid var(--border-color);
}
.table_col {
    padding: 10px 20px;
    box-sizing: border-box;
    border-right: 1px solid var(--border-color);
}
.table_col:last-child {
    border: none;
}
.card_content_item .table_sub_head {
    padding: 0;
}
/* .card_content_item .table_sub_head.table_card_item {
    padding: 0 20px;
} */
.desc_txt_color {
    color: var(--desc-text-color);
}

/* 控制表头菜单 */
.table_sub_card_arrow_icon {
    position: absolute;
    left: 10px;
    top: 50%;
    /* transform: translate(0, -50%); */
    translate: 0 -50%;
}
.table_card_item_display {
    display: none;
}
.table_item_display {
    display: none;
}

.table_card_control:hover .table_card_item_display {
    display: block;
}
.table_item_control:hover .table_item_display {
    display: block;
}
.table_item_menu:hover {
    background-color: rgba(206, 206, 206, 0.3);
}
.card_head_item:hover {
    background-color: rgba(206, 206, 206, 0.3);
}

.arrow_icon_box {
    position: relative;
    padding: 0 20px 0;
    height: 100%;
    box-sizing: border-box;
}
.arrow_icon_box .el-icon-arrow-down {
    display: none;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
}

.arrow_icon_box:hover .el-icon-arrow-down {
    display: block;
}
.table_row_control {
    /* padding: 10px 20px; */
}
.row_add_button {
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 20px;
}

/* 覆盖样式 */
>>> .el-card {
    border: none;
}
>>> .el-collapse-item__content {
    padding-bottom: 0;
}
>>> .card_item_content .el-card__body {
    padding: 0;
}
>>> .table_head_card .el-card__body {
    padding: 0;
}

>>> .table_sub_card .el-card__body {
    padding: 0;
}
>>> .card_item_content .el-collapse-item {
    padding: 0 0 20px 20px;
}
>>> .el-card .el-collapse-item__arrow {
    display: none;
}

>>> .el-card .el-collapse-item__arrow.table_sub_card_arrow_icon {
    display: block;
}
</style>
